<template>
    <div class="product-home">
        <!-- 1. 公用的导航头部 -->
        <common-nav-header>
            <template #left>
                <a class="back fl" href="javascript:;"></a>
            </template>
            <template #title>
                <h1 class="title fl">产品中心</h1>
            </template>
            <template #right>
                <a class="cart fr" href="javascript:;"></a>
            </template>
        </common-nav-header>
        <!-- 2. 公用的搜索商品组件 -->
        <search></search>
        <!-- 3. 分类商品展示 - 使用vant组件来写 -->
        <van-tabs v-model="shopTypeActive" :animated="true" :swipeable="false" duration="0.45">
            <van-tab title="所有产品">
                <shop-list title="所有产品" :show="false"></shop-list>
            </van-tab>
            <van-tab title="电池">
                <shop-list title="电池" :show="false"></shop-list>
            </van-tab>
            <van-tab title="配件">
                <shop-list title="配件" :show="false"></shop-list>
            </van-tab>
            <van-tab title="汽车">
                <shop-list title="汽车" :show="false"></shop-list>
            </van-tab>
            <van-tab title="其他">
                <shop-list title="其他" :show="false"></shop-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    // 引入公用的头部导航组件
    import CommonNavHeader from '@/components/commonHeader/CommonNavHeader';

    // 引入公用的搜索商品组件
    import Search from '@/components/search/Search';

    // 引入公用的商品列表组件
    import ShopList from '@/components/shop/ShopList';

    export default {
        name: 'productHome',
        watch: {

        },
        created() {

        },
        mounted() {

        },
        data() {
            return {
                shopTypeActive: 0
            };
        },
        methods: {

        },
        computed: {

        },
        components: {
            CommonNavHeader,
            Search,
            ShopList
        }
    };

</script>

<style lang="scss">
    .van-tabs {
        .van-tab {
            font-weight: normal;
            font-size: 24px;
            color: #999;
            flex-basis: 20.2% !important;

            &:nth-of-type(2),
            &:nth-of-type(3),
            &:nth-of-type(4),
            &:nth-of-type(5) {
                flex-basis: 13.8% !important;
            }
        }

        .van-tabs__line {
            height: 4px;
            background-color: #2fe4e0;
        }

        .van-tab--active {
            color: #333;
        }
    }

    .van-tabs__content {
        width: 100%;
        background-color: #fff;
        margin-top: 4px;
    }

</style>

<style lang="scss" scoped>
    .product-home {
        width: 100%;
        background-color: #f4f4f4;
        padding-bottom: 146px!important;

        .common-nav-header {
            .back {
                width: 39px;
                height: 88px;
                background: url(/images/wf_ico.png) no-repeat -154px 13px;
                background-size: 834px 535px;
            }
        }

        .search {
            padding-bottom: 40px;
        }
    }

</style>
